<template>
  <div
    class="window"
    v-drag="{ el: '.topbar', boundarycall: handlerDraggable }"
    ref="instanceRef"
  >
    <div class="topbar" v-double-click="doubleClick">
      <div class="left">
        <slot name="icon"></slot>
        <!-- <ant-html5-two-tone style="vertical-align: middle" /> -->
        <template v-if="title">
          {{ props.title }}
        </template>
      </div>
      <div class="right">
        <ant-minus-outlined @click="minimize" />
        <ant-fullscreen-outlined v-if="!isMax" @click="switchWindowSize" />
        <ant-fullscreen-exit-outlined v-else @click="switchWindowSize" />
        <ant-close-outlined @click="handleClose" />
        <!-- <el-icon><Minus /></el-icon>
        <el-icon><CopyDocument /></el-icon>
        <el-icon><DCaret /></el-icon>
        <el-icon><Close /></el-icon> -->
      </div>
    </div>
    <div class="window-body">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, onMounted } from "vue";
const props = defineProps({
  title: {
    type: String,
  },
});

const emit = defineEmits(["min", "max", "switch", "re", "close"]);

const state = ref({
  initWidth: 800,
  initHeight: 600,
  oldWidth: 800,
  oldHeight: 600,
});

const isMax = ref(false);

const instanceRef = ref<HTMLElement>();

onMounted(() => {
  const el: any = instanceRef.value;
  // const el = getCurrentInstance()?.refs.instanceRef;
  console.log(el, instanceRef.value);

  // state.value = {
  //   initWidth: el.style.width,
  //   initHeight: el.style.height,
  //   oldWidth: el.style.width,
  //   oldHeight: el.style.height,
  // };

  console.log(state.value);
});

// 最小化
function minimize() {
  const el: any = instanceRef.value;

  state.value.oldWidth = el.clientWidth;
  state.value.oldHeight = el.clientHeight;
  el.style.display = "none";
  // el.style.width = "10rem";
  // el.style.height = "2rem";
  // el.style.bottom = "2rem";
  console.log(state.value);

  emit(
    "min",
    {
      title: props.title,
      icon: null,
    },
    () => {
      reduction();
    }
  );
}

function max() {
  const el: any = instanceRef.value;
  state.value.initWidth = el.style.width;
  state.value.initHeight = el.style.height;
  el.style.width = "100%";
  el.style.height = "100%";
  el.style.left = "50%";
  el.style.top = "50%";
  isMax.value = true;
  emit("max");
}

function reduction() {
  console.log("reduction");

  const el: any = instanceRef.value;
  console.log(el);

  const { initWidth, initHeight } = state.value;
  console.log(initHeight);

  el.style.width = initWidth;
  el.style.height = initHeight;
  el.style.display = "block";
  isMax.value = false;
  emit("re", isMax.value);
}

function handleClose() {
  const el: any = instanceRef.value;
  // state.value.oldWidth = el.style.width;
  // state.value.oldHeight = el.style.height;
  // el.style.display = "none";
  emit("close");
}

function switchWindowSize() {
  if (isMax.value) {
    reduction();
  } else {
    max();
  }
  emit("switch", isMax.value);
}

function handlerDraggable(value: any) {
  console.log("haha...", value);
  if (value.type == "keydownAfter") {
    max();
  }
}

function doubleClick() {
  console.log("doubleClick");
  switchWindowSize();
}
</script>

<style scoped lang="less">
.window {
  width: 800px;
  height: 600px;
  background: #fff;
  box-shadow: var(--box-shadow-light);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: display, color, background-color, width, height 0.2s linear;
  // transition: width, height 0.2s linear;
  // margin: 5px;

  .topbar {
    display: flex;
    justify-content: space-between;
    padding: 5px 5px;
    background: #d5ebe1;
    user-select: none;
    cursor: pointer;

    .right {
      // transition: all 0.3s linear;
      & > * {
        transition: all 0.1s linear;
        padding: 0 5px;
        // margin: 0 5px;
      }

      & > *:hover {
        color: #fff;
      }
    }
  }

  .window-body {
    overflow: auto;
    width: 100%;
    height: calc(100% - 1.6rem - 10px);
    padding: 5px;
  }
}
</style>
